<!--
 * @Description: 
 * @Autor: 商晓彬
 * @Date: 2021-07-19 11:12:43
 * @LastEditors: 商晓彬
 * @LastEditTime: 2022-02-16 09:06:17
-->
<div class="message">
    <div class="m-subheader">
      <div class="row align-items-center">
        <div class="mr-auto col-auto">
          <h3 class="m-subheader__title m-subheader__title--separator">
            <span>消息设置</span>
          </h3>
        </div>
      </div>
    </div>
    <div class="m-content">
      <div class="m-portlet m-portlet--mobile">
        <div class="m-portlet__body">
           <div class="row align-items-center">
            <div class="primeng-datatable-container">
              <p-table #dataTable [value]="primengTableHelper.records" (onLazyLoad)="getTableList($event)"
                rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false" [lazy]="true"
                [scrollable]="true" ScrollWidth="100%" [responsive]="primengTableHelper.isResponsive"
                [resizableColumns]="primengTableHelper.resizableColumns" >
                <ng-template pTemplate="header" >
                  <tr>
                    <th style="width: 100px">操作</th>
                    <th style="width: 50px">序号</th>
                    <th style="width: 150px">类型代码</th>
                    <th style="width: 150px">消息类型</th>
                    <th style="width: 150px">接收角色</th>
                    <th style="width: 150px">是否开启</th>
                    <th style="width: 150px">是否使用默认配置</th>
                  </tr>
                </ng-template>
                <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                  <tr>
                    <td style="width: 100px">
                      <div class="btn-group dropdown" dropdown container="body">
                        <button dropdownToggle class="dropdown-toggle btn btn-sm btn-primary">
                          <i class="fa fa-cog"></i><span class="caret"></span> 操作
                        </button>
                        <ul class="dropdown-menu" *dropdownMenu>
                          <li>
                            <a *ngIf="'Pages.MessageSettings.Modify' | permission" href="javascript:;" (click)="update(record)">修改</a>
                          </li>
                        </ul>
                      </div>
                    </td>
                    <td style="width: 50px;"> {{rowIndex+1}} </td>
                    <td style="width: 150px">{{record.affairCode}}</td>
                    <td style="width: 150px">{{record.affairType}}</td>
                    <td style="width: 150px">{{record.roleListDesc}}</td>
                    <td style="width: 150px">{{record.isOpenDesc}}</td>
                    <td style="width: 150px">{{record.isdefaultDesc}}</td>
                  </tr>
                </ng-template>
              </p-table>
              <div class="primeng-paging-container">
                <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                  (onPageChange)="getTableList($event)" [totalRecords]="primengTableHelper.totalRecordsCount"
                  [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                </p-paginator>
                <span class="total-records-count">
                  {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 修改弹窗 -->
    <p-dialog header="修改" [(visible)]="updateFlag" [style]="{width: '500px',height: '400px'}"[minY]="70" 
     [baseZIndex]="10000" [modal]="true" [responsive]="true" (onHide)="onHide($event)">
    <div class="modal-body" style="height: 320px;" *ngIf="updateFlag">
        <div class="form-group" style="display: flex;justify-content: center;">
            <label style="margin-right: 10px;margin-top: 15px;">角色*</label>
            <p-multiSelect id="roleIds" [ngStyle]="{'margin-top': '10px'}" [options]="roleOptions" dataKey="label" optionLabel="label"
             [(ngModel)]="updateForm.roleIds" [panelStyle]="{minWidth:'12em'}" defaultLabel="请选择角色"
              [itemSize]="34"></p-multiSelect>
        </div>
        <div class="form-group" style="justify-content: center;display: flex;">
            <label style="margin-top: 3px;">是否开启*</label>
            <p-toggleButton name="isUsed" style="margin-left: 10px;" [(ngModel)]="updateForm.isUsed" onLabel="启用" offLabel="停用" onIcon="pi pi-check" offIcon="pi pi-times" [style]="{'width':'80px'}"></p-toggleButton>
            <label style="margin-left: 20px;margin-top: 3px;">启用默认配置*</label>
            <p-toggleButton name="isUsed" style="margin-left: 10px" [(ngModel)]="updateForm.isDefault" onLabel="启用" offLabel="停用" onIcon="pi pi-check" offIcon="pi pi-times" [style]="{'width':'80px'}"></p-toggleButton>
        </div>
    </div>
    <div class="modal-footer" style=" justify-content: center;">
        <button pButton type="button" label="保存" (click)="save()"></button>
    </div>
    </p-dialog>
  </div>